<template>
<div>
  <div class="wraper">
    <Swiper auto>
      <Swiper-item  v-for="(item,index) of imgList" :key="index"><img :src="item" alt=""></Swiper-item>
    </Swiper>
  </div>
  <div class="box_content">
    <div class="city_chose_box">
      <div class="begin_city" @click="choseCity(0)">
        <div class="begin_city_t">
          <div class="dot"></div>
          <div class="text">出发城市</div>
        </div>
        <div class="begin_city_name">{{ startCity }}</div>
      </div>
      <div class="exchange_city" @click="exchangeCity"><img src="./../../assets/img/exchange.png" alt=""></div>
      <div class="end_city" @click="choseCity(1)">
        <div class="begin_city_t">
          <div class="dot"></div>
          <div class="text">到达城市</div>
        </div>
        <div class="begin_city_name" >{{ endCity }}</div>
      </div>
    </div>
    <div class="search_btn" @click="goSearch">
      查询车主
    </div>
    <div class="help_call_box">
      <div class="help" @click="goHelp">
        <div><img src="./../../assets/img/kefu.png" alt=""></div>
        <div>帮助中心</div>
      </div>
      <div class="call" @click="goPolice">
        <div><img src="./../../assets/img/waring.png" alt=""></div>
        <div>一键报警</div>
      </div>
    </div>
    <div class="nocar_order_search_box" v-if="nocarOrderInfo">
      <div class="nocar_order_search">
        <div class="search_top">
          <div><img src="./../../assets/img/clock.png" alt=""></div>
          <div>当前预约</div>
        </div>
        <div class="search_b">
          <div class="search_b_l" @click="goNoCarOrderUpdate">
            <p>始终点：{{ nocarOrderInfo.start }}&rarr;{{ nocarOrderInfo.end }}</p>
            <p>人数：{{ nocarOrderInfo.num}}</p>
            <p style="color: #568df4">时间：{{ nocarOrderInfo.outtime }}</p>
            <p>系统正在为你自动匹配中...</p>
          </div>
          <div class="search_b_r">
            <div class="cancle" @click="cancleNocarOrder(nocarOrderInfo.id)">
              取消
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hot_line">
      <div class="hot_line_t">
        <div>热门路线</div>
        <!-- <p>其他路线</p> -->
      </div>
      <div class="hot_line_con">
        <div class="hot_line_moudle" v-for="(item, index) of cityLists" :key="item.id" @click="openSearchCar(item)">
          <div>{{ item.start }}</div>
          <div><i class="iconfont icon-chufadaodaxiao"></i></div>
          <div>{{ item.end }}</div>
        </div>
        <!-- <div class="hot_line_moudle">
          <div>唐山</div>
          <div><i class="iconfont icon-chufadaodaxiao"></i></div>
          <div>天津</div>
        </div>
        <div class="hot_line_moudle">
          <div>唐山</div>
          <div><i class="iconfont icon-chufadaodaxiao"></i></div>
          <div>天津</div>
        </div>
        <div class="hot_line_moudle">
          <div>唐山</div>
          <div><i class="iconfont icon-chufadaodaxiao"></i></div>
          <div>天津</div>
        </div>
        <div class="hot_line_moudle">
          <div>唐山</div>
          <div><i class="iconfont icon-chufadaodaxiao"></i></div>
          <div>天津</div>
        </div>
        <div class="hot_line_moudle">
          <div>唐山</div>
          <div><i class="iconfont icon-chufadaodaxiao"></i></div>
          <div>天津</div>
        </div> -->
      </div>
    </div>
  </div>
  <popup v-model="cityShow" position="bottom" width="100%" height="100%">
    <div class="city_box">
      <topHeader>
        <div slot="center">
          <span>城市选择</span>
        </div>
        <div class="close" slot="right" @click="closeCity">
          &times;
        </div>
      </topHeader>
      <div class="city city-wap">
        <div class="search">
          <input type="text" placeholder="城市搜索" v-model="citySelect" @change="searchCity">
        </div>
        <div class="search_con">
          <div class="city_li" v-for="item of citySearchs" @click="choseOneCity(item.cityname)">{{ item.cityname }}</div>
        </div>
        <div class="city-list" ref="cityWarp">
          <div class="block-60"></div>
          <div v-for="item in cityListData" class="clearfix">
            <p :id="item.ckey">{{item.ckey}}</p>
            <ul>
              <li v-for="ritem in item.cityList" @click="choseOneCity(ritem.airportName)">{{ritem.airportName}}</li>
            </ul>
          </div>
        </div>
        <div class="filter">
          <div v-for="item in cityListKey" @click="switchKey(item)">{{item}}</div>
        </div>
        <div class="active-key" v-if="activeKey">{{activeKey}}</div>
      </div>
    </div>
  </popup>
</div>
</template>

<script>
/* eslint-disable */
import { loadHotCity, loadCitys, searchCity, nocarOrderInfo, nocarOrderCancle } from '@/api/allapis'
import { Swiper, SwiperItem, Popup } from 'vux'
import axios from 'axios'
import img from './../../assets/img/shunfengbanner.png'
import topHeader from './../../components/topHeader'
export default {
  data () {
    return {
      imgList: [
        img,
        img
      ],
      cityShow: false,
      cityLists: [],
      startCity: '--',
      endCity: '--',
      activeKey: '',
      dataList: [],
      citySelect: '',
      citySearchs: [],
      nocarOrderInfo: null
    }
  },

  components: {
    Swiper,
    SwiperItem,
    Popup,
    topHeader
  },

  computed: {
    cityListData(){
      let map = {}; // 处理过后的数据对象
      let temps = []; // 临时变量
      this.dataList.map(item=>{
          if(item.airportcode){
              let ekey = item.airportcode.charAt(0).toUpperCase(); // 根据key值的第一个字母分组，并且转换成大写
              temps = map[ekey] || []; // 如果map里面有这个key了，就取，没有就是空数组
              temps.push({
                  airportcode: item.airportcode,
                  airportName: item.cityname
              });
              map[ekey] = temps;
          }
      })
      let list = [];
      for(let gkey in map) {
          list.push({
              ckey: gkey,
              cityList: map[gkey]
          })
      }

      list = list.sort((li1, li2)=> li1.ckey.charCodeAt(0) - li2.ckey.charCodeAt(0));
      return list;
    },
    cityListKey(){
      let cityListKey = [];
      this.cityListData.map(item=>{
          cityListKey.push(item.ckey);
      })
      return cityListKey;
    }
  },

  mounted () {
    this.loadCityList()
    this.loadHotCity()
    this.loadNocarInfo()
  },

  methods: {
    loadNocarInfo () {
      nocarOrderInfo({ userId: this.$store.state.user.uerInfo.id }).then(res => {
        this.nocarOrderInfo = res.data
        if (this.nocarOrderInfo) {
          this.startCity = this.nocarOrderInfo.start
          this.endCity = this.nocarOrderInfo.end
        }
      })
    },
    goNoCarOrderUpdate () {
      this.$router.push({ name: 'nocarorderupdate', query: { pageName: 'index' } })
    },
    cancleNocarOrder (id) {
      nocarOrderCancle({id}).then(res => {
        this.$vux.alert.show({
          title: '人人同行提示',
          content: res.msg,
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
      })
      this.loadNocarInfo()
    },
    goSearch () {
      if(this.startCity === '--'||this.endCity === '--' ){
        this.$vux.alert.show({
          title: '人人同行提示',
          content: '请选择开始或者结束城市',
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
      }else{
        this.$router.push({ name: 'searchcar', query: { start: this.startCity, end: this.endCity } })
      }
    },
    openSearchCar (item) {
      this.startCity = item.start
      this.endCity = item.end
      this.$router.push({ name: 'searchcar', query: { start: this.startCity, end: this.endCity } })
    },
    exchangeCity () {
      let temp
      temp = this.startCity
      this.startCity = this.endCity
      this.endCity = temp
    },
    loadHotCity () {
      loadHotCity().then(res => {
        if (res.code === 200) {
          this.cityLists = res.data
        }
      })
    },
    loadCityList () {
      let self = this
      loadCitys().then(res => {
        self.dataList = res.data
      })
      // axios.get('/wx/static/mock/city.json').then(function (response) {
      //   self.dataList = response.data.dataList
      // }).catch(function (error) {
      //   console.log(error)
      // })
    },
    searchCity () {
      searchCity({name:this.citySelect}).then(res => {
        this.citySearchs = res.data
      })
    },
    choseCity (type) {
      this.citySearchs = []
      this.citySelect = ''
      this.cityType = type
      this.cityShow = true
    },
    switchKey(key){
      // 当前选中的字母
      this.activeKey = key;
      // 1秒后清空，让`active-key`隐藏
      setTimeout(()=>{
      this.activeKey = '';
      }, 1000)
      // 获取当前字母来cityList中距离顶部的位置
      let targetTop = document.querySelector('#'+key+'').offsetTop;
      console.log(targetTop)
      this.$nextTick(() => {
        console.log(this.$refs.cityWarp.scrollTop)
        this.$refs.cityWarp.scrollTop = targetTop-80
        // this.$refs.cityWarp.style.top = `-${targetTop}px`
      })
      // document.getElementById('cityWarp').scrollTop = 200
      // console.log(document.getElementById('city_warp'))
      // // window.scrollTo({ 
      //   top: targetTop - 100, // 60是search的高度
      //   behavior: "smooth" 
      // });
    },
    closeCity () {
      this.cityShow = false
    },
    choseOneCity (cityName) {
      if(this.cityType === 0) {
        this.cityShow = false
        this.startCity = cityName
      } else {
        this.cityShow = false
        this.endCity = cityName
      }
    },
    goPolice () {
      this.$router.push({ name: 'location' })
    },
    goHelp () {
      this.$router.push({ name: 'help' })
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./index.less');
.wraper {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 52%;
  img{
    width: 100%;
  }
}
</style>